<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Async ball</title>
    <style>
        .ball1 {
            width: 50px;
            height: 50px;
            background-color: aqua;
            border-radius: 50%;
            transform: translateX(0);
            /* transition: transform 1s; */
        }

        .ball2 {
            width: 50px;
            height: 50px;
            background-color: darkorange;
            border-radius: 50%;
            transform: translateX(0);
            /* transition: transform 1s; */
        }

        .ball3 {
            width: 50px;
            height: 50px;
            background-color: slategrey;
            border-radius: 50%;
            transform: translateX(0);
            /* transition: transform 1s; */
        }
    </style>
</head>

<body>
    <div class="ball ball1"></div>
    <div class="ball ball2"></div>
    <div class="ball ball3"></div>
    <script>
        /* eslint-disable */
        const ball1 = document.querySelector('.ball1')
        const ball2 = document.querySelector('.ball2')
        const ball3 = document.querySelector('.ball3')
        // demo 使用时只把相应注释取消就行

        // callback 用法的 demo
        // function move(ball, target, cb) {
        //     let a = 1;
        //     let time = setInterval(() => {
        //         ball.style.transform = `translate(${a++}px)`
        //         if (a > target) {
        //             clearInterval(time)
        //             cb();
        //         };
        //     }, 15);
        // }
        // move(ball1, 100, function () {
        //     move(ball2, 100, function () {
        //         move(ball3, 100, function () {
        //             console.log('over')
        //         })
        //     })
        // })

        // Promise 用法的 demo
        function move(ball, target) {
            const promise = new Promise((resolve, reject) => {
                let a = 1;
                let time = setInterval(() => {
                    ball.style.transform = `translate(${a++}px)`
                    if (a > target) {
                        clearInterval(time)
                        resolve();
                    };
                }, 15);
            })
            return promise;
        }
        // move(ball1, 100)
        //     .then(() => {
        //         return move(ball2, 100)
        //     })
        //     .then(() => {
        //         return move(ball3, 100)
        //     })
        //     .then(() => {
        //         console.log('over')
        //     })

        // async/await 用法的 demo
        async function go() {
            await move(ball1, 100);
            await move(ball2, 100);
            await move(ball3, 100);
        }
        go().then(res => { console.log(res) })
    </script>
</body>

</html>